import React, { Component } from 'react';
import { subscribe, sendMsg } from '../lib/socket';
import { getName } from '../lib/name'
import Msg from './msg'
import './index.css';

class Chart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModule: true,
            userName: "",
            list: [],
            inputValue: "",
            timestamp: "",
            top: 0
        }
    }

    // 输入框值得改变
    inputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }
    // 
    nameChange(e) {

        this.userName = e.target.value
    }
    // 设置姓名
    setName() {
        if (this.userName) {
            this.setState({
                showModule: false,
                userName: this.userName
            })
            subscribe(this.userName, (err, list) => {
                this.setState({
                    list: list
                })
            });
        }

    }

    keydown(e) {
        if (e.keyCode === 13) {
            this.sendMessage();
        }
    }
    // 开始发送消息
    sendMessage() {
        const { inputValue, userName } = this.state;
        if (inputValue) {
            let time = new Date();
            let params = {
                id: time.getTime(),
                type: 'message',
                isRead: false,
                time: time.toLocaleString(),
                author: userName,
                content: inputValue
            }
            sendMsg(params, function () { });
            this.setState({
                inputValue: ""
            })
        }
    }
    readMsg(id) {
        const { list } = this.state;
        let message = list.find(item => {
            return item.id == id
        })
        message.isRead = true
        sendMsg(message, function () { });
    }
    setNameRandom() {
        this.userName = getName();
        this.setName();
    }
    render() {
        var { list = [], showModule, userName, inputValue } = this.state;
        return (
            <div className="Chart">
                <div className="phone">
                    <div className="msg-content">
                        <ul className="message">
                            {
                                list.map((msg, index) => (
                                    <Msg msg={msg} key={index} io={this.io} userName={userName} readMsg={this.readMsg.bind(this)} />

                                ))
                            }
                        </ul>
                        <div className="input-area">
                            <input onChange={this.inputChange.bind(this)} value={inputValue} onKeyDown={this.keydown.bind(this)}></input>
                            <button onClick={this.sendMessage.bind(this)}>发送</button>
                        </div>
                    </div>
                    {
                        showModule ? <div className="user-name">
                            <div>请设置您的名称,仅在本页面内有效</div>
                            <input onChange={this.nameChange.bind(this)} placeholder="请输入" ></input>
                            <button onClick={this.setName.bind(this)}>确定</button>
                            <button onClick={this.setNameRandom.bind(this)}>随机生成</button>
                        </div> : ''
                    }
                </div>
            </div>
        );
    }
}

export default Chart;
